<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账单管理</title>
    <link rel="stylesheet" href="../js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <style>
        #whole {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center; /*实现水平居中*/
            align-items: center; /*实现垂直居中*/
            top: 50%;
            left: 50%;
            position: absolute;
            margin: -250px 0 0 -250px;
            background: #409EFF;
        }
        body {
            background: #409EFF;
        }
    </style>
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui-2.13.0/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="whole">
    <div>
        <el-link href="chargeAccounts.html">回到账单首页<i class="el-icon-view el-icon--right"></i> </el-link>
        <br>
        <el-select style="width: 500px" v-model="bill.consumptionType" placeholder="选择已有消费类型" clearable
                   @change="queryConsumptionContent">
            <el-option
                    v-for="item in consumptionTypes"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <br><br>
        <el-select style="width: 500px" placeholder="查看已有消费内容" clearable>
            <el-option
                    v-for="item in consumptionContents"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-divider></el-divider>
        <el-input style="width: 500px" class="box" placeholder="请输入新增消费类型" v-model="bill.consumptionType" >
            <template slot="prepend">新增消费类型</template>
        </el-input>
        <br><br>
        <el-input style="width: 500px" class="box" placeholder="请输入新增消费内容" v-model="bill.consumptionContent" >
            <template slot="prepend">新增消费内容</template>
        </el-input>
        <br><br>
        <el-button style="width: 500px" class="box" type="success" @click="submit">点击新增</el-button>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: '#whole',
        data: {
            consumptionTypes: [],
            consumptionContents: [],
            bill: {
                consumptionType: "",
                consumptionContent: ""
            }
        },
        methods:{
            queryConsumptionType() {
                //获取consumptionTypes
                axios.post('https://3723r72n06.picp.vip/mylife/bill/queryConsumptionType', "", {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    response.data.forEach(item => {
                        let arr = {
                            value: item,
                            label: item
                        };
                        this.consumptionTypes.push(arr);
                    });
                });
            },
            queryConsumptionContent() {
                //获取consumptionContents
                this.consumptionContents=[];
                this.bill.consumptionContent="";
                axios.post('https://3723r72n06.picp.vip/mylife/bill/queryConsumptionContent', this.bill, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    response.data.forEach(item => {
                        let arr = {
                            value: item,
                            label: item
                        };
                        this.consumptionContents.push(arr);
                    });
                });
            },
            submit(){
                axios.post('https://3723r72n06.picp.vip/mylife/bill/addBillType', this.bill, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    if (response.data.code == 200) {
                        this.$message.success(response.data.msg);
                        setTimeout(() => {
                            location.href = "chargeAccounts.html";
                        }, 1000);
                    } else if (response.data.code == 1004 || response.data.code == 1005) {
                        this.$message.warning(response.data.msg);
                    }
                });
            }
        },
        mounted(){
            this.queryConsumptionType();
        }
    });
</script>
</html>